<template>

<!-- 先判断 roleName 是否有值，无值时显示加载中 -->
<div v-if="!roleName">
  <el-loading v-loading="true" element-loading-text="加载中...">
    <div style="height: 1000px;"></div> <!-- 占位高度，避免布局抖动 -->
  </el-loading>
</div>

<div class="other" v-if="roleName === '护理员'">
    <div class="result">
      <h2>审批结果</h2>
    </div>
    <div class="ca">
      <img src="/src/assets/images/注意1.png">
      <div>
        <h3>{{ isRejected ? '已拒绝' : '审批中' }}</h3>
      </div>
      <div class="oth">{{ isRejected ? '抱歉，您的退住申请已被拒绝。如有疑问，请联系相关审批人员。' : '稍等，退住申请单正在审批中，若该申请单长时间未处理，请联系(审批角色)！' }}</div>
      <!-- 操作记录区域 -->
      <el-card class="operation-record-card" :class="{ 'rejected-record-card': isRejected }">
        <div class="record-header">
          <h3>操作记录</h3>
          <div class="record-status">
            <span class="status-badge" :class="isRejected ? 'rejected' : 'processing'">
              {{ isRejected ? '已拒绝' : '审批中' }}
            </span>
          </div>
        </div>
        <div class="record-timeline" v-if="operationRecords.length">
          <div 
            v-for="(record, index) in operationRecords" 
            :key="index"
            class="timeline-item"
            :class="{ 
              'completed': record.personStatus.includes('已发起') || record.personStatus.includes('已通过') || record.personStatus.includes('已完成'),
              'processing': record.personStatus.includes('审批中') || record.personStatus.includes('已拒绝')
            }"
          >
            <div class="timeline-dot">
              <el-icon 
                :color="record.personStatus.includes('已拒绝') ? '#f56c6c' : (record.personStatus.includes('已通过') || record.personStatus.includes('已发起') || record.personStatus.includes('已完成') ? '#67c23a' : '#409eff')" 
                size="16"
              >
                <Check v-if="record.personStatus.includes('已通过') || record.personStatus.includes('已发起') || record.personStatus.includes('已完成')" />
                <Close v-else-if="record.personStatus.includes('已拒绝')" />
                <Clock v-else />
              </el-icon>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">{{ record.content || '-' }}</div>
              <div class="timeline-desc">{{ record.personStatus || '-' }}</div>
              <div class="timeline-time">{{ record.time || '-' }}</div>
              <div class="timeline-opinion" v-if="record.opinion && record.opinion !== '-'">
                <div class="opinion-label">审批意见：</div>
                <div class="opinion-content">{{ record.opinion }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="loading-tip">加载中...</div>
      </el-card>
    </div>
  </div>

  <div class="drop5-page" v-else>
    <div class="main-container">
      <!-- 左侧信息区域 -->
      <div class="left-panel">
        <!-- 基本信息卡片 -->
        <el-card class="info-card">
          <h3 class="card-title">基本信息</h3>
          <ul class="info-list">
            <li><span class="label">老人姓名</span><span class="value">{{ basicInfo.elderName || '-' }}</span></li>
            <li><span class="label">老人身份证号</span><span class="value">{{ basicInfo.idCard || '-' }}</span></li>
            <li><span class="label">联系方式</span><span class="value">{{ basicInfo.phone || '-' }}</span></li>
            <li><span class="label">费用期限</span><span class="value">{{ basicInfo.feePeriod || '-' }}</span></li>
            <li><span class="label">护理等级</span><span class="value">{{ basicInfo.nursingLevel || '-' }}</span></li>
            <li><span class="label">入住床位</span><span class="value">{{ basicInfo.bed || '-' }}</span></li>
            <li><span class="label">签约合同</span>
              <span class="value">
                <template v-if="basicInfo.contract">
                  <a :href="getContractUrl(basicInfo.contract)" target="_blank" class="view-link">查看</a>
                </template>
                <span v-else>-</span>
              </span>
            </li>
            <li><span class="label">养老顾问</span><span class="value">{{ basicInfo.advisor || '-' }}</span></li>
            <li><span class="label">护理员</span><span class="value">{{ basicInfo.nurse || '-' }}</span></li>
          </ul>
        </el-card>

        <!-- 申请信息卡片 -->
        <el-card class="info-card">
          <h3 class="card-title">申请信息</h3>
          <ul class="info-list">
            <li><span class="label">退住日期</span><span class="value">{{ applyInfo.checkoutDate || '-' }}</span></li>
            <li><span class="label">退住原因</span><span class="value">{{ formatReason(applyInfo.reason) || '-' }}</span></li>
            <li><span class="label">备注</span><span class="value">{{ applyInfo.remark || '-' }}</span></li>
            <li><span class="label">申请人</span><span class="value">{{ applyInfo.applyName || '-' }}</span></li>
            <li><span class="label">申请时间</span><span class="value">{{ applyInfo.applyTime || '-' }}</span></li>
          </ul>
        </el-card>

        <!-- 解除记录卡片 -->
        <el-card class="info-card">
          <h3 class="card-title">解除记录</h3>
          <ul class="info-list">
            <li><span class="label">提交人</span><span class="value">{{ dissolutionInfo.dissolutionSubmitter || '-' }}</span></li>
            <li><span class="label">解除日期</span><span class="value">{{ dissolutionInfo.dissolutionDate || '-' }}</span></li>
            <li><span class="label">解除协议</span>
              <span class="value">
                <template v-if="dissolutionInfo.dissolutionFile">
                  <a :href="getFileUrl(dissolutionInfo.dissolutionFile)" target="_blank" class="view-link">查看</a>
                </template>
                <span v-else>-</span>
              </span>
            </li>
          </ul>
        </el-card>

        <!-- 调整费用账单卡片 -->
        <el-card class="bill-card">
          <h3 class="card-title">调整费用账单</h3>
          <p class="bill-tip">提交账单审批前，需在入账列表中处理未缴账单，若未处理，则无法提交</p>

          <!-- 应退部分 -->
          <div class="bill-section">
            <div class="section-header">
              <span class="section-name">应退</span>
              <span class="section-todo">待办：{{ formatNumber(unpaidBills.todoCount) }}</span>
              <span class="section-total">小计：{{ formatAmount(unpaidBills.totalAmount) }}元</span>
            </div>
            <div class="section-content">
              <div v-for="(bill, index) in unpaidBills.bills" :key="index" class="bill-item">
                <p>账单编号: {{ bill.billNo || '-' }} <span class="bill-type">费用账单</span></p>
                <p>护理项目名称: {{ bill.itemName || '-' }}</p>
                <p>应付金额: {{ formatAmount(bill.amount) }}元</p>
              </div>
              <div v-if="unpaidBills.bills.length === 0" class="empty-bill">暂无应退账单数据</div>
            </div>
          </div>

          <!-- 欠费部分 -->
          <div class="bill-section">
            <div class="section-header">
              <span class="section-name">欠费</span>
              <span class="section-todo">待办：{{ formatNumber(arrearsBills.total) }}</span>
              <span class="section-total">小计：{{ formatAmount(arrearsBills.totalAmount) }}元</span>
            </div>
            <div class="section-content">
              <div v-for="(bill, index) in arrearsBills.bills" :key="index" class="bill-item">
                <p>账单编号: {{ bill.billNo || '-' }} <span class="bill-type">月度账单</span></p>
                <p>账单月份: {{ bill.billMonth || '-' }}</p>
                <p>应付金额: {{ formatAmount(bill.payableAmount) }}元</p>
              </div>
              <div v-if="arrearsBills.bills.length === 0" class="empty-bill">暂无欠费账单数据</div>
            </div>
          </div>

          <!-- 余额部分 -->
          <div class="bill-section">
            <div class="section-header">
              <span class="section-name">余额</span>
              <span class="section-total">小计：{{ formatAmount(balanceBills.actualDepositRefund + balanceBills.prepaymentBalance) }}元</span>
            </div>
            <div class="section-content">
              <div class="bill-item">
                <p>可退押金: {{ formatAmount(balanceBills.depositBalance) }}元</p>
                <div class="adjust-area">
                  <span class="adjust-label">实退金额:</span>
                  <el-input-number 
                    v-model="balanceBills.actualDepositRefund" 
                    :min="0" 
                    :max="balanceBills.depositBalance" 
                    :precision="2" 
                    style="width: 120px;"
                    disabled
                  ></el-input-number>
                  <span class="adjust-label">调整备注:</span>
                  <el-input 
                    v-model="balanceBills.depositAdjustRemark" 
                    placeholder="无调整备注" 
                    maxlength="50"
                    style="width: 200px;"
                    disabled
                  ></el-input>
                </div>
                <p>预缴款: {{ formatAmount(balanceBills.prepaymentBalance) }}元</p>
              </div>
            </div>
          </div>

          <!-- 最终金额计算 -->
          <div class="final-calculation">
            <span class="calculation-label">最终退款金额 = 应退 - 欠费 + (实退金额 + 预缴款) =</span>
            <span class="final-amount">{{ finalRefundAmount }}元</span>
          </div>
        </el-card>
      </div>

      <!-- 右侧操作区域 -->
      <div class="right-panel">
        <!-- 审批表单卡片 -->
        <el-card class="approval-card" :class="{ 'rejected-card': isRejected }">
          <h3 class="card-title">账单审批</h3>
          <el-form 
            :model="approvalForm" 
            ref="approvalFormRef" 
            label-width="100px" 
            class="approval-form"
          >
            <el-form-item 
              label="审批结果" 
              prop="result"
              :rules="[{ required: true, message: '请选择审批结果', trigger: 'change' }]"
            >
              <el-radio-group v-model="approvalForm.result" class="approval-radios" :disabled="isRejected">
                <el-radio label="pass" class="approval-radio">审批通过</el-radio>
                <el-radio label="reject" class="approval-radio">审批拒绝</el-radio>
                <el-radio label="return" class="approval-radio">驳回修改</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item 
              label="审批意见" 
              prop="opinion"
              :rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }]"
            >
              <el-input 
                v-model="approvalForm.opinion" 
                type="textarea" 
                placeholder="请输入审批意见（必填）" 
                maxlength="300"
                show-word-limit 
                rows="6"
                :disabled="isRejected"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 操作记录卡片 -->
        <el-card class="record-card" :class="{ 'rejected-record-card': isRejected }">
          <div class="record-header">
            <h3 class="card-title">操作记录</h3>
            <div class="record-status">
              <span class="status-badge" :class="isRejected ? 'rejected' : 'completed'">
                {{ isRejected ? '已拒绝' : '已完成' }}
              </span>
            </div>
          </div>
          <div class="record-timeline" v-if="operationRecords.length">
            <div v-for="(record, index) in operationRecords" :key="index" class="timeline-item completed">
              <div class="timeline-dot">
                <el-icon :color="record.personStatus && record.personStatus.includes('已拒绝') ? '#f56c6c' : '#67c23a'" size="16">
                  <Check v-if="record.personStatus && (record.personStatus.includes('已发起') || record.personStatus.includes('已通过'))" />
                  <Close v-else-if="record.personStatus && record.personStatus.includes('已拒绝')" />
                  <Clock v-else />
                </el-icon>
              </div>
              <div class="timeline-content">
                <div class="timeline-title">{{ record.content || '-' }}</div>
                <div class="timeline-desc">{{ record.personStatus || '-' }}</div>
                <div class="timeline-time">{{ record.time || '-' }}</div>
                <div class="timeline-opinion" v-if="record.opinion && record.opinion !== '-'">
                  <div class="timeline-opinion-label">审批意见：</div>
                  <div class="timeline-opinion-text">{{ record.opinion }}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="empty-record">暂无操作记录</div>
        </el-card>
      </div>
    </div>

    <!-- 底部按钮区域 -->
    <div class="button-bar">
      <el-button @click="handleBack" size="default" class="back-button">返回</el-button>
      <el-button 
        v-if="!isRejected"
        type="primary" 
        @click="handleSubmit" 
        size="default" 
        class="submit-button"
        :loading="isSubmitting"
      >
        提交审批
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Check, Close, Clock } from '@element-plus/icons-vue';
import { getContent, addContent } from '@/api/drop/content';
import useUserStore from '@/store/modules/user';
import { getAccraditationrecordByDropContentId,updateAccraditationrecord } from '@/api/accraditationrecord/accraditationrecord';
import { getUser } from '@/api/system/user';

const roleName = ref('');

// 组件通信
const emit = defineEmits(['submit-step', 'back-to-list']);
const userStore = useUserStore();
const defaultIcon = ''; // 可替换为实际头像地址

// 接收步骤四传递的参数
const props = defineProps({
  dropContentId: {
    type: [String, Number],
    default: '',
    required: true // 强制要求传递ID
  },
  stepNum: {
    type: Number,
    default: 5
  }
});

// 数据容器
const basicInfo = ref({});         // 基本信息
const applyInfo = ref({});         // 申请信息
const dissolutionInfo = ref({});   // 解除记录
const operationRecords = ref([]);  // 操作记录
const fullData = ref({});          // 全量历史数据

// 账单数据（与步骤四保持一致）
const unpaidBills = ref({ todoCount: 0, totalAmount: 0, bills: [] });
const arrearsBills = ref({ total: 0, totalAmount: 0, bills: [] });
const balanceBills = ref({
  depositBalance: 0,
  prepaymentBalance: 0,
  actualDepositRefund: 0,
  depositAdjustRemark: ''
});

// 审批表单数据
const approvalForm = ref({
  result: '',    // pass:通过, reject:拒绝, return:驳回
  opinion: ''    // 审批意见
});
const approvalFormRef = ref(null);
const isSubmitting = ref(false);   // 提交加载状态

// 是否已拒绝状态
const isRejected = ref(false);

// 获取当前时间格式化
const getCurrentTimeFormatted = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 工具函数：格式化数字（处理非数字类型）
const formatNumber = (value) => {
  if (value === null || value === undefined) return 0;
  const num = Number(value);
  return isNaN(num) ? 0 : num;
};

// 工具函数：格式化金额（保留2位小数）
const formatAmount = (value) => {
  return formatNumber(value).toFixed(2);
};

// 计算最终退款金额
const finalRefundAmount = computed(() => {
  const refund = formatNumber(unpaidBills.value.totalAmount);
  const arrears = formatNumber(arrearsBills.value.totalAmount);
  const balance = formatNumber(balanceBills.value.actualDepositRefund) + formatNumber(balanceBills.value.prepaymentBalance);
  return (refund - arrears + balance).toFixed(2);
});

// 格式化退住原因
const formatReason = (reason) => {
  const reasonMap = {
    'personal': '个人原因',
    'recovery': '身体康复',
    'dissatisfaction': '服务不满意',
    'other': '其他原因'
  };
  return reasonMap[reason] || reason;
};

// 获取文件URL
const getFileUrl = (filePath) => {
  if (!filePath) return '';
  const baseUrl = import.meta.env.VITE_APP_BASE_API;
  // 如果已经是完整URL，直接返回；否则拼接baseUrl
  if (filePath.indexOf('http://') === 0 || filePath.indexOf('https://') === 0) {
    return filePath;
  }
  return baseUrl + filePath;
};

// 获取合同URL
const getContractUrl = (contractNo) => {
  if (!contractNo) return '';
  // 这里可以根据合同编号构建查看合同的URL
  // 暂时返回空，需要根据实际业务逻辑调整
  return '#';
};

// 加载步骤四传递的全量数据
const fetchDataByDropContentId = async () => {
  if (!props.dropContentId) {
    ElMessage.warning('未获取到有效的单据ID，无法加载信息');
    return;
  }

  try {
    const response = await getContent(props.dropContentId);
    if (response.code === 200 && response.data?.currentInfo) {
      fullData.value = JSON.parse(response.data.currentInfo);
      
      // 填充基本信息
      basicInfo.value = {
        elderName: fullData.value.elderName || '',
        idCard: fullData.value.idCard || '',
        phone: fullData.value.phone || '',
        feePeriod: fullData.value.feePeriod || '',
        nursingLevel: fullData.value.nursingLevel || '',
        bed: fullData.value.bed || '',
        contract: fullData.value.contract || '',
        advisor: fullData.value.advisor || '',
        nurse: fullData.value.nurse || ''
      };

      // 填充申请信息
      applyInfo.value = {
        checkoutDate: fullData.value.checkoutDate || '',
        reason: fullData.value.reason || '',
        remark: fullData.value.remark || '',
        applyName: fullData.value.applyName || '',
        applyTime: fullData.value.applyTime || ''
      };

      // 填充解除记录（确保显示步骤三的提交人）
      dissolutionInfo.value = {
        dissolutionSubmitter: fullData.value.dissolutionSubmitter || fullData.value.dissolutionOperator || '-',
        dissolutionDate: fullData.value.dissolutionDate || '-',
        dissolutionFile: fullData.value.dissolutionFile || ''
      };

      // 填充账单数据
      const billData = fullData.value.billData || {};
      unpaidBills.value = {
        todoCount: formatNumber(billData.unpaidBills?.todoCount || 0),
        totalAmount: formatNumber(billData.unpaidBills?.totalAmount || 0),
        bills: billData.unpaidBills?.bills || []
      };
      arrearsBills.value = {
        total: formatNumber(billData.arrearsBills?.total || 0),
        totalAmount: formatNumber(billData.arrearsBills?.totalAmount || 0),
        bills: billData.arrearsBills?.bills || []
      };
      balanceBills.value = {
        depositBalance: formatNumber(billData.balanceBills?.depositBalance || 0),
        prepaymentBalance: formatNumber(billData.balanceBills?.prepaymentBalance || 0),
        actualDepositRefund: formatNumber(billData.balanceBills?.actualDepositRefund || 0),
        depositAdjustRemark: billData.balanceBills?.depositAdjustRemark || ''
      };

      // 如果有保存的操作记录，直接使用（包括账单审批记录）
      if (fullData.value.operationRecords && fullData.value.operationRecords.length > 0) {
        operationRecords.value = fullData.value.operationRecords;
      } else {
        // 否则构建基本操作记录（包含步骤一至四）
        operationRecords.value = [
          {
            content: '发起申请-申请退住',
            personStatus: `${fullData.value.applyName || '-'} (已发起)`,
            time: fullData.value.applyTime || '-',
            icon: ''
          },
          {
            content: '(角色) 审批-申请审批',
            personStatus: `${fullData.value.approver || '-'} (${fullData.value.approvalResult === 'approvalPass' ? '已通过' : '已拒绝'})`,
            opinion: fullData.value.approvalOpinion || '-',
            time: fullData.value.approveTime || '-',
            icon: ''
          },
          {
            content: '操作-解除合同',
            personStatus: `${dissolutionInfo.value.dissolutionSubmitter} (已完成)`,
            time: fullData.value.dissolutionTime || '-',
            icon: ''
          },
          {
            content: '操作-调整账单',
            personStatus: `${fullData.value.billSubmitter || '-'} (已完成)`,
            time: fullData.value.billSubmitTime || '-',
            icon: ''
          }
        ];
      }

      // 检查账单审批是否已拒绝
      if (fullData.value.billApproval) {
        if (fullData.value.billApproval.result === 'reject') {
          isRejected.value = true;
          approvalForm.value.result = 'reject';
          approvalForm.value.opinion = fullData.value.billApproval.opinion || '';
        }
      }

    } else {
      ElMessage.error(`数据加载失败：${response.msg || '接口返回异常'}`);
    }
  } catch (error) {
    console.error('步骤五数据拉取报错：', error);
    ElMessage.error('数据加载异常，请重试');
  }
};

// 表单验证
const validateForm = async () => {
  if (!approvalFormRef.value) return false;
  try {
    await approvalFormRef.value.validate();
    return true;
  } catch (error) {
    ElMessage.warning('请完善审批结果与意见');
    return false;
  }
};
defineExpose({ validateForm });

// 返回按钮逻辑
const handleBack = () => {
  ElMessageBox.confirm(
    '确定要现在返回吗？',
    '确认返回',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    emit('back-to-list');
  }).catch(() => {});
};

// 提交审批逻辑
const handleSubmit = async () => {
  const isValid = await validateForm();
  if (!isValid) return;

  isSubmitting.value = true; // 显示加载状态
  const resultMap = { pass: '已通过', reject: '已拒绝', return: '已驳回' };
  const currentUser = userStore.nickName || '管理员';
  const currentTime = new Date().toLocaleString('zh-CN', { hour12: false });

  try {
    // 构建新的操作记录
    const newRecord = {
      content: '账单审批操作',
      personStatus: `${currentUser} (${resultMap[approvalForm.value.result]})`,
      time: currentTime,
      opinion: approvalForm.value.opinion,
      icon: defaultIcon
    };

    // 整合提交数据
    const submitData = {
      ...fullData.value,
      billApproval: {
        approver: currentUser,
        approveTime: currentTime,
        result: approvalForm.value.result,
        resultText: resultMap[approvalForm.value.result],
        opinion: approvalForm.value.opinion
      },
      finalRefundAmount: finalRefundAmount.value,
      currentStep: 5,
      operationRecords: [...operationRecords.value, newRecord]
    };

    // 调用接口保存
    const response = await addContent({
      currentInfo: JSON.stringify(submitData),
      dropContentId: props.dropContentId
    });

    if (response.code === 200 && response.dropContentId) {
      if (approvalForm.value.result === 'pass') {
        ElMessage.success('账单审批通过，流程已完成');
        emit('submit-step', { newDropContentId: response.dropContentId });
      } else {
        ElMessageBox.confirm(
          `确定要${approvalForm.value.result === 'reject' ? '拒绝' : '驳回'}该申请吗？`,
          '确认操作',
          { type: approvalForm.value.result === 'reject' ? 'error' : 'warning' }
        ).then(() => {
          ElMessage.success(`申请已${resultMap[approvalForm.value.result]}`);
          emit('back-to-list');
        });
      }
    } else {
      ElMessage.error(`提交失败：${response.msg || '接口异常'}`);
    }

    // 更新审批表
    const approvalRecords = await getAccraditationrecordByDropContentId(props.dropContentId);
    
    const updateRecord = {
      id: approvalRecords.data.id,
      dropContentId: response.dropContentId,
      currentStep: "账单审批",
      approverName: currentUser,
    };

    // 如果是拒绝，设置拒绝相关字段，并保持stepNo为5
    if (approvalForm.value.result === 'reject') {
      updateRecord.nextStep = "已拒绝";
      updateRecord.stepNo = "5"; // 不再往下一步骤走
      updateRecord.handleType = "已拒绝";
      updateRecord.auditStatus = "拒绝";
      updateRecord.opinion = approvalForm.value.opinion;
      updateRecord.finishTime = getCurrentTimeFormatted();
    } else {
      // 正常通过，继续下一步
      updateRecord.nextStep = "退住审批";
      updateRecord.stepNo = "6";
    }

    await updateAccraditationrecord(updateRecord);

  } catch (error) {
    console.error('步骤五提交报错：', error);
    ElMessage.error('提交失败，请检查网络');
  } finally {
    isSubmitting.value = false; // 关闭加载状态
  }
};

// 组件挂载时加载数据
onMounted(() => {

//获取当前用户信息
  getUser(userStore.id).then(res => {
    roleName.value = res.data.roles[0].roleName;
  });

  console.log('步骤五接收参数：', {
    dropContentId: props.dropContentId,
    stepNum: props.stepNum
  });
  fetchDataByDropContentId();
});
</script>

<style scoped>
.other .ca{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
}

.other h3 {
  margin-top: 20px;
}

.other .operation-record-card {
  margin-top: 30px;
  width: 600px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: auto;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.record-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.record-status {
  display: flex;
  align-items: center;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.processing {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.record-timeline {
  position: relative;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 32px;
  width: 2px;
  height: calc(100% + 4px);
  background-color: #e4e7ed;
}

.timeline-item.completed:not(:last-child)::after {
  background-color: #67c23a;
}

.timeline-item.processing:not(:last-child)::after {
  background-color: #409eff;
}

.timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timeline-item.completed .timeline-dot {
  background-color: #f0f9ff;
  border: 2px solid #67c23a;
}

.timeline-item.processing .timeline-dot {
  background-color: #f0f9ff;
  border: 2px solid #409eff;
}

.timeline-content {
  flex: 1;
  padding-top: 2px;
}

.timeline-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.timeline-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
}

.timeline-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.timeline-opinion {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
}

.opinion-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.opinion-content {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.other img {
  width: 60px;
  height: 60px;
}

.oth {
  color: #333;
  font-size: 14px;
}

.drop5-page {
  padding-top: 20px;
  min-height: 100vh;
  box-sizing: border-box;
}

.main-container {
  display: flex;
  gap: 20px;
  box-sizing: border-box;

}

/* 卡片样式 */
.info-card,
.bill-card {
  width: 730px;
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.approval-card,
.record-card {
  width: 500px;
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

/* 信息列表样式 */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  display: flex;
  margin-bottom: 12px;
  line-height: 24px;
}

.label {
  width: 120px;
  text-align: right;
  margin-right: 16px;
  color: #666;
  font-size: 14px;
  flex-shrink: 0;
}

.value {
  flex: 1;
  font-size: 14px;
  color: #333;
  word-break: break-all;
}

.view-link {
  color: #409eff;
  margin-left: 8px;
  text-decoration: none;
  font-size: 14px;
}

.view-link:hover {
  text-decoration: underline;
}

/* 账单区域样式 */
.bill-card {
  padding: 15px;
}

.bill-tip {
  color: #999;
  font-size: 13px;
  margin: 0 0 15px 0;
  padding: 8px 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.bill-section {
  margin-bottom: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.section-number {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  margin-right: 8px;
  font-size: 12px;
}

.section-name {
  font-weight: 500;
  color: #333;
  margin-right: 15px;
}

.section-todo {
  color: #666;
  font-size: 14px;
  margin-left: 380px;
}

.section-total {
  font-weight: 500;
  margin-left: auto;
  font-size: 14px;
}

.section-content {
  padding: 15px;
}

.bill-item {
  padding: 10px;
  border: 1px dashed #eee;
  border-radius: 4px;
  margin-bottom: 10px;
}

.bill-item:last-child {
  margin-bottom: 0;
}

.bill-type {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid blue;
  color: blue;
  font-size: 12px;
  border-radius: 4px;
  margin-left: 8px;
}

.adjust-area {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #eee;
}

.adjust-label {
  font-size: 14px;
  color: #666;
  margin-right: 8px;
}

/* 最终金额计算 */
.final-calculation {
  margin-top: 15px;
  padding: 12px;
  border-radius: 4px;
  text-align: center;
  ;
}

.calculation-label {
  color: #666;
  margin-right: 10px;
}

.final-amount {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 500;
}

/* 审批表单样式 */
.approval-card {
  padding: 15px;
}

.approval-form {
  margin-top: 10px;
}

.approval-radios {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}

.approval-radio {
  display: flex;
  align-items: center;
}

/* 操作记录样式 */
.record-card {
  padding: 15px;
}

.record-list {
  margin-top: 10px;
}

.record-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #eee;
}

.record-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.record-icon {
  margin-right: 10px;
  flex-shrink: 0;
}

.record-content {
  flex: 1;
}

.record-action {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.record-person {
  color: #666;
  font-size: 13px;
  margin-bottom: 4px;
}

.record-time {
  color: #999;
  font-size: 12px;
  margin-bottom: 6px;
}

.record-opinion {
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 13px;
}

.opinion-label {
  color: #666;
  font-weight: 500;
}

.opinion-content {
  color: #333;
}

/* 底部按钮 */
.button-bar {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

.back-button {
  min-width: 120px;
}

.submit-button {
  min-width: 120px;
}

.left-panel {
  margin-left: -200px;
}

/* Timeline styles for v-else */
.drop5-page .record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.drop5-page .record-status {
  display: flex;
  align-items: center;
}

.drop5-page .status-badge.completed {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background-color: #f0f9ff;
  color: #67c23a;
  border: 1px solid #95d475;
}

.drop5-page .record-timeline {
  position: relative;
}

.drop5-page .timeline-item.completed:not(:last-child)::after {
  background-color: #67c23a;
}

.drop5-page .timeline-opinion-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.drop5-page .timeline-opinion-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* 拒绝状态样式 */
.rejected-card {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
}

.rejected-record-card {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
}

.status-badge.rejected {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}

.status-badge.completed {
  background-color: #f0f9ff;
  color: #67c23a;
  border: 1px solid #95d475;
}
</style>